<template>
<!-- 
    template在页面上不显示
    template在vue页面中只能有一个
    vue文件画页面必须要有template
    template的下一级只能有一个标签
    template叫做模板占位
 -->
  <div id="app1">
    <!-- 图片变成了base64 
    因为webpack中图片小于一定大小时会自动转base64在浏览器中显示 -->
    <!-- <img src="./assets/logo.png"> -->
    <!-- <router-view/> -->
    {{name}}
    <!-- Vue指令 
    v-model 表单的value进行数据绑定
    v-show 
    v-if
    v-show和 v-if的区别 ：v-if是false时候页面上直接消失  v-show是false页面上是display等于none
    v-else-if
    v-else
    -->
    <input type="text"  v-model="name">
    <div v-if="type == 3">连龙不爱说话，要回吹牛皮</div>
    <div v-else-if="type==3">2</div>
    <div v-else>3</div>
    <div v-show="type == 2">李凤真可爱</div>
  </div>
</template>


<script>
export default {
  name: 'App',//vue文件的name的值是vue文件的文件名
  // 因为vue里面name不能重复
  data(){
    return{

      // vue中data是一个函数   用法上相当于小程序的data
      // vue中data为什么是一个函数不是一个对象
      // vue的data其实是Vue prototype（原型）上的属性，数据仍然存在Vue内存中
      // 如果写成对象那么多个vue文件存在于一个页面中data的变量一旦和其他的vuedata变量重复
      // 就会被替换
      // 面试时：为了保证vue文件及组件数据的独立性 必须是函数
      name:"学委真漂亮",
      type:3
    }
  }
}
</script>

<style>

</style>
